<template>
  <div>
    <div class="head d-flex align-center justify-space-between">
      <span>运动轨迹</span>
      <div class="select" v-if="customerId">
        <span>定位器号：</span>
        <el-select v-model="imei" placeholder="请选择">
          <el-option
            v-for="item in imeiList"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="body">
      <el-amap :zoom="14" :events="events">
        <el-amap-polyline :editable="false" strokeStyle="dashed" strokeColor="#409EFF" :path="polylinePaths">
        </el-amap-polyline>
        <el-amap-marker v-for="(item, index) in paths" v-bind="item" :key="index"></el-amap-marker>
        <el-amap-info-window :position="[position.lng, position.lat]" :isCustom="true" :offset="[0, -10]" :contentRender="contentRender" :visible="infoWindow"></el-amap-info-window>
      </el-amap>
    </div>
  </div>
</template>
<script>
  import Vue from "vue"
  import VueAMap from "vue-amap"
  Vue.use(VueAMap)
  VueAMap.initAMapApiLoader({
    key: "34fd4145be006b416cb88e5455c12dc3",
    plugin: [
      'Autocomplete',
      'PlaceSearch',
      'Scale',
      'OverView',
      'ToolBar',
      'MapType',
      'AMap.PolyEditor',
      'AMap.CircleEditor'
    ],
    v: "1.4.4"
  })
  import {
    getLocationMoveList,
    imeiSelectList
  } from '@/api/customer'
  const startIcon = require('assets/images/startPoint.png')
  const endIcon = require('assets/images/endPoint.png')
  const icon = require('assets/images/location_1.png')
  export default {
    props: {
      detail: Object,
      devideImei: [String, Number]
    },
    data() {
      const _this = this
      return {
        infoWindow: false,
        position: {
          lng: 0,
          lat: 0
        },
        imei: '',
        dataInfo: [],
        imeiList: [],
        events: {
          init(o) {
            _this.o = o
          }
        }
      }
    },
    created() {
      if (this.customerId) {
        this.imeiSelectList()
      } else {
        this.imei = this.devideImei
      }
    },
    computed: {
      customerId() {
        if (this.detail) return this.detail.customerId
        else return false
      },
      paths() {
        return this.generatePaths(this.dataInfo)
      },
      polylinePaths() {
        return this.paths.map((item) => item.position)
      },
      icon() {
        return (datas, index) => {
          if (datas.length === 1 || index === 0) {
            return startIcon
          } else if (datas.length >= 2 && index !== 0 && index !== datas.length - 1) {
            return icon
          } else {
            return endIcon
          }
        }
      }
    },
    watch: {
      imei() {
        this.initLocation()
      }
    },
    methods: {
      contentRender(h) {
        const _this = this
        return h("div", {
            class: 'white info-window',
          }, [
            h('i', {
              class: 'el-icon-circle-close close',
              on: {
                click() {
                  _this.infoWindow = false
                }
              }
            }),
            h('p', {
              class: 'time',
              domProps: { innerHTML: _this.position.time },
              on: {
                click() {
                  _this.infoWindow = false
                }
              }
            }),
            h('p', {
              class: 'address',
              domProps: { innerHTML: _this.position.address },
              on: {
                click() {
                  _this.infoWindow = false
                }
              }
            })
          ]
        )
      },
      imeiSelectList() {
        imeiSelectList(this.customerId).then(res => {
          this.imeiList = res.data.filter(item => {
            return item !== ''
          })
          if (this.imeiList.length) this.imei = this.imeiList[0]
          else {
            this.imei = ''
          }
        })
      },
      initLocation() {
        if (this.imei) {
          getLocationMoveList(this.imei).then(res => {
            this.dataInfo = res.data
            if (this.dataInfo) {
              this.$nextTick(() => {
                this.o.setFitView()
              })
            }
          })
        } else this.dataInfo = []
      },
      generatePaths(datas) {
        const _this = this
        if (datas && datas.length) {
          var paths = []
          let length = 0
          datas.forEach((item, index) => {
            if (item.lat && item.lng) {
              length = paths.push({
                position: [item.lng, item.lat],
                vid: index,
                offset: [-10, -10],
                contentRender(h) {
                  return h("img", {
                    domProps: { src: _this.icon(datas, index) },
                    on: {
                      click() {
                        _this.infoWindow = true
                        _this.position = item
                      }
                    }
                  })
                },
                angle: length > 0 ?
                  getAngle([item.lng, item.lat], paths[length - 1].position) :
                  0
              })
            }
          })
          if (paths[0]) {
            paths[0].offset = [-14, -40]
          }
          if (length > 1) {
            paths[length - 1].offset = [-24, -48]
            paths[length - 1].angle = 0
          }
          return paths
        } else {
          return []
        }
      }
    }
  }

  function getAngle(n, next) {
    if (n && next) {
      var ret
      var w1 = (n[1] / 180) * Math.PI
      var j1 = (n[0] / 180) * Math.PI

      var w2 = (next[1] / 180) * Math.PI
      var j2 = (next[0] / 180) * Math.PI

      ret =
        4 * Math.pow(Math.sin((w1 - w2) / 2), 2) -
        Math.pow(Math.sin((j1 - j2) / 2) * (Math.cos(w1) - Math.cos(w2)), 2)
      ret = Math.sqrt(ret)

      var temp = Math.sin((j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2))
      ret = ret / temp

      ret = (Math.atan(ret) / Math.PI) * 180
      ret += 90

      if (j1 - j2 < 0) {
        if (w1 - w2 < 0) {
          ret
        } else {
          ret = -ret + 180
        }
      } else {
        if (w1 - w2 < 0) {
          ret = 180 + ret
        } else {
          ret = -ret
        }
      }
      return ret - 45
    } else {
      return 0
    }
  }
</script>
<style lang="scss" scoped>
  .head {
    padding: 14px 20px;
    color: #262626;
    font-size: 16px;
    border-bottom: 1px solid #E9E9E9;
  }

  ::v-deep.body {
    height: 539px;
    padding: 20px;
    .info-window {
      padding: 20px 20px 10px 20px;
      position: relative;
      width: 200px;
      .close {
        font-size: 15px;
        position: absolute;
        top: 5px;
        right: 5px;
      }
      .address, .time {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
      }
    }
  }
</style>